<template>
   <div class="page">
      <div class="van-nav-head">
         <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" :fixed="true"/>
      </div>
      <van-cell-group>
         <van-field v-model="formData.name" maxLength="20" label="姓名" placeholder="请输入姓名"/>
         <van-field v-model="formData.mobile" maxLength="11" type="number" label="联系电话" placeholder="请输入联系电话"/>
         <van-field
             readonly
             clickable
             name="area"
             :value="value"
             label="地区选择"
             placeholder="点击选择省市区"
             @click="showArea = true"
         />
         <van-popup v-model="showArea" position="bottom">
            <van-area
                :area-list="areaList"
                @confirm="onConfirm"
                @cancel="showArea = false"
            />
         </van-popup>
         <van-field v-model="formData.address" maxLength="30" label="详细地址" placeholder="请输入详细地址"/>
      </van-cell-group>

      <div class='flex align-center bg-white margin-tb-lg'>
         <div @click="formData.is_default==1?formData.is_default=0:formData.is_default=1"
              class="flex align-center padding-sm">
            <van-icon v-if="formData.is_default==1" class="text-blue text-f22" name="checked"
                      style="line-height: inherit;"/>
            <van-icon v-else class="text-gray text-f22" name="circle" style="line-height: inherit;"/>
            <span class="padding-left-xs">设为默认地址</span>
         </div>
      </div>
      <div class="flex justify-center padding-lr-lg padding-tb">
         <van-button block round type="info">立即保存</van-button>
      </div>
   </div>
</template>

<script type="es6">
   import areaList from "../../../assets/js/area.js"

   export default {
      name: "",
      components: {},
      data() {
         return {
            value: "",
            title: "",
            areaList,
            showArea: false,
            formData: {
               "id": 0,
               "name": "",
               "mobile": "",
               "email": "",
               "address": "",
               "is_default": 0,
               "province_name": "",
               "city_name": "",
               "district_name": ""
            },
         };
      },
      mounted() {
         let id = this.$route.query.id;
         if(id){
            this.formData = {
               "id": 10088,
               "name": "ok-mini",
               "mobile": "13915452585",
               "email": "",
               "address": "双流教师公寓",
               "zip": "",
               "is_default": 1,
               "province_name": "四川省",
               "city_name": "成都市",
               "district_name": "武侯区"
            };
            this.title = "编辑地址";
            this.value = "四川省-成都市-武侯区";
         } else {
            this.title = "添加地址";
         }
      },
      methods: {
         onConfirm(e) {
            this.formData.province_name = e[0].name;
            this.formData.city_name = e[1].name;
            this.formData.district_name = e[2].name;
            this.value = e[0].name + "-" + e[1].name + "-" + e[2].name;
            this.showArea = false;
         }
      }
   }
</script>

<style lang="scss" scoped>

</style>